import { makeAutoObservable } from 'mobx';

type Menu = {
    id: string;
    title: string;
    pathname: string;
    icon: string;
    children?: Menu[];
};

type Tab = {
    id: string;
    title: string;
    pathname: string;
    icon: string;
};

class MenuStore {
    menus: Menu[] = [
        {
            id: 'users',
            title: '用户管理',
            pathname: '/console/users',
            icon: 'Users2',
        },
        {
            id: 'product_manage',
            title: '商品管理',
            icon: 'Package',
            pathname: '',
            children: [
                {
                    id: 'products',
                    title: '商品列表',
                    pathname: '/console/products',
                    icon: 'Package',
                },
                {
                    id: 'products_upsert',
                    title: '新增商品',
                    pathname: '/console/products/upsert',
                    icon: 'Package',
                },
            ],
        },
        {
            id: 'orders',
            title: '订单管理',
            pathname: '/console/orders',
            icon: 'ShoppingCart',
        },
    ];

    tabs: Tab[] = [];

    constructor() {
        makeAutoObservable(this);
    }

    setMenus(menus: Menu[]) {
        this.menus = menus;
    }

    // breadcrumb遍历使用
    get mapMenus() {
        const MENUS_MAP = new Map();
        function loop(list: any[] = [], parent: any[] = []) {
            list.forEach((item: any) => {
                const { children, ...others } = item;
                if (children) {
                    parent.unshift(others);
                    loop(children, parent);
                } else {
                    MENUS_MAP.set(item.pathname, [...parent, item]);
                }
            });
        }
        loop(this.menus);
        return MENUS_MAP;
    }

    // 根据当前页面的pathname获取breadcrumb
    getBreadcrumbList(pathname: string) {
        return this.mapMenus.get(pathname);
    }

    getBreadcrumb(pathname: string) {
        const pathList = pathname.split('/');
        let newList;
        while (pathList.length > 0) {
            const path = pathList.join('/');
            newList = this.getBreadcrumbList(path);
            if (newList) {
                break;
            }
            pathList.shift();
        }
        if (!newList) {
            newList = [];
        }
        if (!newList.find((item: any) => item.pathname === pathname)) {
            newList.push({
                id: pathname,
                pathname,
                title: '',
                icon: '',
            });
        }
        newList = newList.filter((item: any) => item.pathname !== '/console');
        return newList;
    }

    // 增加tab
    addTab(pathname: string) {
        if (pathname.endsWith('/') || pathname === '/console') return;

        if (!this.tabs.find((item) => item.pathname === pathname)) {
            let [tab] = this.getBreadcrumb(pathname).slice(-1);
            if (!tab) {
                tab = {
                    id: pathname,
                    pathname,
                    title: '',
                    icon: '',
                };
            }
            this.tabs.push(tab);
        }
    }

    // 删除tab
    removeTab(tab: Tab) {
        this.tabs = this.tabs.filter((item) => item.pathname !== tab.pathname);
    }

    // 删除其他
    removeOthersTab(tab: Tab) {
        this.tabs = this.tabs.filter((item) => item.pathname === tab.pathname);
    }

    // 全部关闭
    removeAllTab() {
        this.tabs = [];
    }

    // 关闭右侧
    removeRightTab(tab: Tab) {
        const index = this.tabs.findIndex((item) => item.pathname === tab.pathname);
        this.tabs = this.tabs.slice(0, index);
    }
}

const menuStore = new MenuStore();

export default menuStore;
